<template>
  <div>
    <el-card style="min-width: 1200px">
      <div class="tableSelectWrap">
        <el-form
          ref="templateForm"
          :model="commandForm"
          label-width="100px"
          style="margin-bottom: -15px"
        >
          <el-row>
            <el-col :span="7">
              <el-form-item label="类型" prop="couponType">
                <el-select
                  v-model="commandForm.couponType"
                  style="width: 100%"
                  placeholder="请选择类型"
                >
                  <el-option label="所有" value=""></el-option>
                  <el-option label="折扣券" :value="1"></el-option>
                  <el-option label="现金券" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7" :offset="1">
              <el-form-item prop="templateName" label="模板名称">
                <el-input
                  style="width: 100%"
                  v-model="commandForm.templateName"
                  placeholder="请输入模板名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="2" style="min-width: 170px">
              <el-button class="width120" @click="resetForm('templateForm')"
                >重置</el-button
              >
              <el-button type="primary" class="width120" @click="()=>{
               this.dataForm=JSON.parse(JSON.stringify(this.commandForm));
               this.getDataList()
              }"
                >查询</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 15px; min-width: 1200px">
      <div class="switch">
        <el-switch v-model="isFixedTableH" inactive-text="固定表头">
        </el-switch>
        <el-button @click="createTem" type="primary" style="width: 190px"
          >创建优惠券模板</el-button
        >
      </div>
      <el-table :height="fixedTableHeight" :data="dataList">
        <template slot="empty">
          <el-empty
            :image="require('@/assets/imgs/middleWork/k1.png')"
            :image-size="80"
            description="暂无相关数据"
          ></el-empty>
        </template>
        <el-table-column
          show-overflow-tooltip
          prop="gmtCreated"
          align="center"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="templateName"
          align="center"
          label="模板名称"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="couponType"
          align="center"
          label="类型"
        >
          <template slot-scope="scope">{{
            scope.row.couponType === 1 ? "折扣券" : "现金券"
          }}</template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="id"
          align="center"
          width="340"
          label="模板ID"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="couponType"
          align="center"
          label="状态"
        >
          <template slot-scope="scope">{{
            scope.row.status === 2
              ? "有效"
              : scope.row.status === 1
              ? "无效"
              : ""
          }}</template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="expiresType"
          align="center"
          label="有效期"
        >
          <template slot-scope="scope">
            <div
              style="
              overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.expiresType === 1
                  ? scope.row.expiresStart + " ~ " + scope.row.expiresEnd
                  : "自领取之日起" + scope.row.expiresDay + "日"
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="address"
          align="center"
          label="已发放"
        >
          <template slot-scope="scope"
            >{{ scope.row.issueCouponNum }} |
            {{ scope.row.couponNum }}</template
          >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="address"
          align="center"
          label="已核销"
        >
          <template slot-scope="scope"
            >{{ scope.row.finishCoupon }} | {{ scope.row.couponNum }}</template
          >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          width="160"
          prop="act"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row.id)" type="text"
              >详情</el-button
            >
            <el-button
              @click="delFn(scope.row.id)"
              type="text"
              >删除</el-button
            >
            <el-button
              @click="handleProvide(scope.row.id)"
              type="text"
              v-if="
                scope.row.status === 2 &&
                scope.row.issueCouponNum < scope.row.couponNum
              "
              >发放优惠券</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      layout="prev, pager, next, sizes, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @current-change="pageCurrentChangeHandle"
      @size-change="pageSizeChangeHandle"
    >
    </el-pagination>
    <codeDialogVue
      codeId="6"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import codeDialogVue from "@/components/codeDialog.vue";

import mixin from "@/mixins/mixin";
export default {
  mixins: [mixin],
  name: "couponVue",
  components: {
    codeDialogVue,
  },
  data() {
    return {
      codeItem: "",
      codeType: "",
      codeDialog: false,
      mixinViewModuleOptions: {
        getDataListURL: "/api/merchant/couponTemplate/searchByPage",
        deleteURL: "/api/merchant/couponTemplate/delete",
        createdIsNeed:false,
      },
      commandForm: {
        couponType: "",
        templateName: "",
      },
      dataList: [],
    };
  },
  watch: {
    '$store.state.testLine': {
      handler(){
        if(this.$route.name==this.$options.name){
          this.getDataList();
        }
	},
    },
    deep: true
  },
  created(){
    this.dataForm=JSON.parse(JSON.stringify(this.commandForm))
    this.getDataList()
  },
  methods: {
    codeStateFn(val) {
      if (val) {
        this.mixinViewModuleOptions.deleteURL = `/api/merchant/couponTemplate/delete?verificationCodeEnum=SMS_BUSINESS_DELETE_COUPON`;
        this.deleteHandle(
          this.codeItem,
          "优惠券模板删除后无法恢复，已发放未使用的优惠券将无法正常使用，确认删除吗？"
        );
      }
    },
    goCode(val, item) {
      this.codeType = val;
      this.codeItem = item;
      this.codeDialog = true;
    },
    delFn(item){
      this.mixinViewModuleOptions.deleteURL = `/api/merchant/couponTemplate/delete`;
        this.deleteHandle(
          item,
          "优惠券模板删除后无法恢复，已发放未使用的优惠券将无法正常使用，确认删除吗？"
        );
    },
    createTem() {
      this.$router.push({
        path: "/marketingTool/createCoupon",
        query: { type: 1 },
      });
    },
    handleClick(id) {
      this.$router.push({
        path: "/marketingTool/createCoupon",
        query: { type: 3, id },
      });
    },
    handleProvide(id) {
      this.$router.push({
        path: "/marketingTool/createCoupon",
        query: { type: 2, id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.switch {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
